<script setup lang="ts">
import { reactive, computed, Ref, ref, onMounted } from 'vue';


import { onHide, onLoad, onUnload } from '@dcloudio/uni-app'
import { formatTime1 } from '../../../utils/data'
const flag: Ref<boolean> = ref(true);

onLoad(() => {
    setTimeout(() => {
        flag.value = false;
    }, 1000);
    timer

})

const handleTimeOut = () => {
    if (info.time > 0) {
        info.time--
    }
    else {
        clearInterval(timer)
    }
}


const timer = setInterval(handleTimeOut, 1000)

onUnload(() => {
    clearInterval(timer)
})



// 页面跳转
const examing = () => {
    uni.navigateTo({
        url: '/pagesB/exam/examing/examing',
    });
};


const typeOptions: any = {
    answer: "解答题",
    completion: '填空题',
    trueOrfalse: '判断题',
    checkbox: '多选题',
    radio: '单选题'
}

const choose = ['A.', 'B.', 'C.', 'D.']

// 计算属性，返回当前题目
const question = computed(() => {
    return info.list[info.current - 1]
})


const onPage = (v: any) => {
    info.current = v
}

const info = reactive({
    current: 1,
    total: 4,
    time: 150 * 60,
    list: [{
        id: 1,
        question_id: '1',
        title: '当x -> 0时，下列4个无穷小量中比其他3个更高阶的无穷小量是',
        score: '2',
        type: 'radio',
        option: ['ln(1+x)', 'e^x - 1', 'tanx-sinx', '1-cosx'],
        user_value: [''],
    },
    {
        id: 2,
        question_id: '2',
        title: '下列函数中为偶函数的是',
        score: '3',
        type: 'radio',
        option: ['x+sinx', 'xcosx', '2^x+2^-x', '2^x-2^-x'],
        user_value: [''],
    },
    {
        id: 3,
        question_id: '3',
        title: '函数f(x)=x+sinx在定义域R内是',
        score: '3',
        type: 'radio',
        option: ['有界函数', '单调函数', '周期函数', '偶函数'],
        user_value: [''],
    },
    {
        id: 4,
        question_id: '4',
        title: '下列说法正确的是',
        score: '1',
        type: 'radio',
        option: ['无穷小表达的是量的大小', '一个非零的数只要它的绝对值小，那就是无穷小', '有限个无穷小的乘积是无穷大数', '零是唯一可作为无穷小的常数'],
        user_value: [''],
    }],

})
</script>
    
<template>
    <div class="container">
        <view class="header">
            <view>剩余考试时间&nbsp;{{ formatTime1(info.time) }}</view>
        </view>
        <view class="main">
            <view class="main_header">
                <view style="font-size: 40rpx;font-weight: 600;">{{ typeOptions[question.type] }}&nbsp;{{ question.score
                }}分
                </view>
                <view style="color: #616161;font-size: 30rpx;">第{{ info.current }}题</view>
            </view>
            <view class="main_card">
                <text class="title">{{ question.title }}</text>
                <view v-for="(item, index) in question.option">{{ choose[index] }}&nbsp;&nbsp;{{ item }}</view>
            </view>
        </view>
        <view class="anwser main">
            <view class="anwser_header">
                <view style="font-size: 40rpx;font-weight: 600;">答案解析</view>
            </view>

        </view>
        <exam-footer :total="info.total" :current="info.current" @on-Page="onPage"></exam-footer>
    </div>
</template>
    
<style scoped lang="scss">
.container {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #f6f6f6;

    .header {
        height: 8vh;
        background-color: $bgcolor;
        @include flex(center);
        font-size: 35rpx;
        color: #fff;
        letter-spacing: 5rpx;
        margin-bottom: 30rpx;
    }

    .main {
        width: 90vw;
        padding: 25rpx;
        margin: auto;
        background-color: #fff;
        border-radius: 15rpx;

        &_header {
            @include flex(space-between);
            border-bottom: 2rpx solid #f6f6f7;
            margin-bottom: 30rpx;
        }

        &_card {
            view {
                margin: 25rpx 0;
            }
        }
    }

    .anwser {
        margin-top: 30rpx;
    }
}
</style>